import React, { Component } from 'react';
import { Form, Icon, Input, Button, Modal, Row, Col } from 'antd';
import axios from '../axios.config';
import md5 from 'js-md5';
import JavascriptCommon from '../javascript.common';

class Login extends Component {
	constructor(props) {
		super(props);
		this.state = {
			svg: '',
			_captcha: '',
		};
	}
	componentDidMount() {
		this.createSvg();
	}
	login(e) {
		e.preventDefault();
		this.props.form.validateFields((err, values) => {
			if (err) {
				return false;
			}
			values.PWD = md5.hex(values.PWD);
			values._CAPTCHA = this.state._captcha;
			axios.post('Http/Msg/MsgStart.ashx?method=Backend_Login', values).then(res => {
				if (res.data.flag === 'True') {
					JavascriptCommon.SetSysTokenSession('accessToken', res.data.result.accessToken);
					JavascriptCommon.SetSysTokenSession('permitToken', res.data.result.permitToken);
					window.location.reload();
				}
			});
		});
	}
	createSvg() {
		axios
			.get('Http/Msg/MsgStart.ashx?method=Backend_Captcha&random=' + Math.random().toString())
			.then(({ data: res }) => {
				this.setState({
					svg: res.result,
					_captcha: res.message,
				});
			});
	}
	render() {
		const { getFieldDecorator } = this.props.form;
		return (
			<div
				style={{
					height: '100vh',
					background: ' #324157',
				}}
			>
				<Modal
					className="login_modal"
					width={420}
					title={
						<div>
							<Icon type="area-chart" theme="outlined" />
							　React 账号登陆
						</div>
					}
					visible={true}
					mask={false}
					maskClosable={false}
					closable={false}
					footer={
						<Row gutter={10} style={{ textAlign: 'center' }}>
							<Col span={8}>
								<div className="auth_login">
									<img alt="微信" src="./images/wechat.png" style={{ background: '#44b549' }} />
									<br />
									<span>微信</span>
								</div>
							</Col>
							<Col span={8}>
								<div className="auth_login">
									<img alt="QQ" src="./images/qq.png" style={{ background: '#00d3fe' }} />
									<br />
									<span>QQ</span>
								</div>
							</Col>
							<Col span={8}>
								<div className="auth_login">
									<img alt="微博" src="./images/weibo.png" style={{ background: '#e6162d' }} />
									<br />
									<span>微博</span>
								</div>
							</Col>
						</Row>
					}
				>
					<Form
						onSubmit={e => {
							this.login(e);
						}}
					>
						<Form.Item label="账　号　" colon={false} labelCol={{ span: 4 }} wrapperCol={{ span: 20 }}>
							{getFieldDecorator('ID', {
								rules: [{ required: true, message: '请输入账号' }],
							})(<Input />)}
						</Form.Item>
						<Form.Item label="密　码　" colon={false} labelCol={{ span: 4 }} wrapperCol={{ span: 20 }}>
							{getFieldDecorator('PWD', {
								rules: [{ required: true, message: '请输入密码' }],
							})(<Input type="password" />)}
						</Form.Item>
						<Form.Item label="验证码　" colon={false} labelCol={{ span: 4 }} wrapperCol={{ span: 20 }}>
							{getFieldDecorator('CAPTCHA', {
								rules: [{ required: true, message: '请输入验证码' }],
							})(
								<Row gutter={8}>
									<Col span={12}>
										<Input />
									</Col>
									<Col span={12} title="看不清？点击切换">
										<div
											className="svg_content"
											dangerouslySetInnerHTML={{ __html: this.state.svg }}
											onClick={() => {
												this.createSvg();
											}}
										/>
									</Col>
								</Row>
							)}
						</Form.Item>
						<Form.Item style={{ textAlign: 'center' }}>
							<Button
								type="primary"
								htmlType="submit"
								size="large"
								style={{
									width: '32%',
									marginTop: '30px',
									background: '#132033',
									fontSize: '14px',
									border: 'none',
								}}
							>
								立即登陆
								<Icon type="right" theme="outlined" />
							</Button>
						</Form.Item>
					</Form>
				</Modal>
			</div>
		);
	}
}

Login = Form.create()(Login);

export default Login;
